<template>
  <el-card class="contain-class">
    <!-- 表单筛选区域 -->
    <el-row type="flex" justify="space-between">
      <el-form
        :inline="true"
        label-width="80px"
        :model="queryData"
        size="normal"
      >
        <el-form-item>
          <el-input
            size="small"
            v-model="queryData.class_name"
            placeholder="班级名称"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-select
            v-model="queryData.subject_id"
            size="small"
            placeholder="归属学科"
          >
            <el-option
              v-for="item in SubjectList"
              :key="item.id"
              :label="item.name"
              :value="item.state"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select
            v-model="queryData.state"
            size="small"
            placeholder="显示状态"
            clearable
          >
            <el-option
              v-for="item in options"
              :key="item.id"
              :label="item.label"
              :value="item.state"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="small" @click="searchOk" plain
            >搜索</el-button
          >
          <el-button size="small" @click="searchCancel" plain>重置</el-button>
        </el-form-item>
      </el-form>
      <!-- 操作区域 -->
      <div>
        <el-button type="primary" @click="addClassBtn" plain
          >创建班级</el-button
        >
      </div>
    </el-row>
    <!-- 表格区域 -->
    <el-table :data="list" border stripe>
      <el-table-column type="expand" align="center" width="50px" label="#">
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item label="班级名称">
              <span>{{ props.row.class_name }}</span>
            </el-form-item>
            <el-form-item label="归属学科">
              <span>{{ props.row.subject_name }}</span>
            </el-form-item>
            <el-form-item label="创建人">
              <span>{{ props.row.username }}</span>
            </el-form-item>
            <el-form-item label="开始结束日期">
              <span
                >{{ props.row.start_time | formatTime }} 至
                {{ props.row.end_time | formatTime }}</span
              >
            </el-form-item>
            <el-form-item label="创建日期">
              <span>{{ props.row.created_at }}</span>
            </el-form-item>
            <el-form-item label="讲师">
              <el-tag
                type="primary"
                v-for="(item, index) in JSON.parse(props.row.teacher_info)"
                :key="index"
                >{{ item.username }}</el-tag
              >
            </el-form-item>
            <el-form-item label="助教">
              <el-tag
                type="success"
                v-for="(item, index) in JSON.parse(props.row.zhujiao_info)"
                :key="index"
                >{{ item.username }}</el-tag
              >
            </el-form-item>
            <el-form-item label="班主任">
              <el-tag
                type="warning"
                v-for="(item, index) in JSON.parse(props.row.manager_info)"
                :key="index"
                >{{ item.username }}</el-tag
              >
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column
        width="60px"
        type="index"
        label="序号"
        align="center"
      ></el-table-column>
      <el-table-column
        width="70px"
        prop="id"
        label="班级ID"
        align="center"
      ></el-table-column>
      <el-table-column
        width="200px"
        prop="class_name"
        label="班级名称"
        align="center"
      ></el-table-column>
      <el-table-column
        width="160px"
        prop="subject_name"
        label="归属学科"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="teacher_info"
        width="150"
        label="讲师"
        align="center"
      >
        <template slot-scope="{ row }">
          <el-tag
            type="primary"
            v-for="(item, index) in JSON.parse(row.teacher_info)"
            :key="index"
            >{{ item.username }}</el-tag
          >
        </template>
      </el-table-column>
      <el-table-column
        prop="zhujiao_info"
        width="150px"
        label="助教"
        align="center"
      >
        <template slot-scope="{ row }">
          <el-tag
            type="success"
            v-for="(item, index) in JSON.parse(row.zhujiao_info)"
            :key="index"
            >{{ item.username }}</el-tag
          >
        </template>
      </el-table-column>
      <el-table-column
        width="150px"
        prop="manager_info"
        label="班主任"
        align="center"
      >
        <template slot-scope="{ row }">
          <el-tag
            type="warning"
            v-for="(item, index) in JSON.parse(row.manager_info)"
            :key="index"
            >{{ item.username }}</el-tag
          >
        </template></el-table-column
      >
      <el-table-column
        width="140px"
        prop="username"
        label="创建人"
        align="center"
      ></el-table-column>
      <el-table-column prop="" width="120px" label="是否显示" align="center">
        <template slot-scope="{ row }">
          <el-switch
            v-model="row.state"
            :active-value="1"
            :inactive-value="2"
            active-text="是"
            inactive-text="否"
            @click.native="changeSwitch(row)"
          >
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column
        prop="start_time"
        width="240px"
        label="开始结束日期"
        align="center"
      >
        <template slot-scope="{ row }">
          {{ row.start_time | formatTime }}至{{ row.end_time | formatTime }}
        </template>
      </el-table-column>
      <el-table-column
        prop="created_at"
        width="160px"
        label="创建日期"
        align="center"
      >
      </el-table-column>
      <el-table-column label="操作" width="200px" align="center">
        <template slot-scope="{ row }">
          <el-button
            size="small"
            type="primary"
            icon="el-icon-edit"
            circle
            @click="editRow(row.id)"
          ></el-button>
          <el-button
            size="small"
            type="danger"
            icon="el-icon-delete"
            circle
            @click="delRow(row.id)"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页区域 -->
    <el-pagination
      @size-change="SizeChange"
      @current-change="CurrentChange"
      :current-page.sync="queryData.page"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="queryData.limit"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      background
    >
    </el-pagination>
    <!-- 弹窗组件 -->
    <addClass ref="addClass" @updateList="initData"></addClass>
  </el-card>
</template>

<script>
import dayjs from "dayjs";
import addClass from "./components/addClass.vue";
import {
  getClasstListApi,
  delClassInfoApi,
  editClassInfoApi,
  editClassApi,
} from "@/api/class";
import { getSubjectInfoAPi } from "@/api/student";
export default {
  name: "Class",

  data() {
    return {
      list: [],
      SubjectList: [],
      options: [
        {
          state: 1,
          label: "显示",
        },
        {
          state: 2,
          label: "隐藏",
        },
      ],
      dialogShow: false,
      queryData: {
        state: "",
        class_name: "",
        page: 1,
        limit: 10,
        subject_id: "",
      },
      total: 0,
    };
  },
  components: {
    addClass,
  },
  created() {
    this.initData();
    this.getSubjectList();
  },

  methods: {
    async initData() {
      let { list, total } = await getClasstListApi(this.queryData);
      // console.log(list);
      this.list = list;
      this.total = total;
    },

    // 归属学科下拉数据
    async getSubjectList() {
      let res = await getSubjectInfoAPi({
        page: 1,
        limit: 1000,
      });
      console.log(res);
      this.SubjectList = res;
    },
    // 监听每页条数切换
    SizeChange(val) {
      this.queryData.limit = val;
      this.initData();
    },
    // 监听页码切换
    CurrentChange(val) {
      this.queryData.page = val;
      this.initData();
    },
    // 搜索提交功能
    searchOk() {
      this.queryData.page = 1;
      this.initData();
    },
    // 重置功能
    searchCancel() {
      this.queryData.subject_id = "";
      this.queryData.class_name = "";
      this.queryData.state = "";
      this.initData();
    },
    // 是否显示
    async getChangeSwitch(data) {
      data.state = data.state === 1 ? 1 : 2;
      await editClassInfoApi({
        id: data.id,
        state: data.state,
      });
      this.initData();
    },
    // 创建班级按钮
    addClassBtn() {
      this.$refs.addClass.dialogShow = true;
    },
    // 编辑
    async editRow(id) {
      let res = await editClassApi(id);
      console.log(res);
      this.$refs.addClass.formData = res;
      // 处理数据
      this.$refs.addClass.formData.teacher_info = JSON.parse(res.teacher_info);
      this.$refs.addClass.formData.zhujiao_info = JSON.parse(res.zhujiao_info);
      this.$refs.addClass.formData.manager_info = JSON.parse(res.manager_info);
      console.log(res.end_time, res.start_time);
      console.log(dayjs(res.end_time).format("YYYY-MM-DD"));
      this.$refs.addClass.dateRange.push(
        dayjs(res.start_time).format("YYYY-MM-DD")
      );
      this.$refs.addClass.dateRange.push(
        dayjs(res.end_time).format("YYYY-MM-DD")
      );
      this.$refs.addClass.dialogShow = true;
    },
    // 删除功能
    async delRow(id) {
      try {
        await this.$confirm("确定要删除吗？");
      } catch (error) {
        return console.log(error);
      }
      await delClassInfoApi(id);
      this.$message.success("删除成功");
      if (this.list.length === 1 && this.queryData.page !== 1) {
        this.queryData.page--;
      }
      this.initData();
    },
  },
};
</script>

<style lang="scss" scoped>
.contain-class {
  margin: 20px;
}
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 35%;
}
</style>

